<template>
<div>
<div><button class="btn btn-primary" type="submit" @click="addNewAddress()">添加收货地址</button></div>
 <div class="container-fluid">
    <a
      ref="confirmModal"
      href="#confirmModal"
      data-toggle="modal"
      style="display: none"
    ></a>
    <div      class="modal fade"
      id="confirmModal"
      role="dialog"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <form class="form-inline" role="form" id="addrForm" method="post">
            <div class="modal-header">
              <button
                class="close"
                aria-hidden="true"
                type="button"
                data-dismiss="modal"
              >
                ×
              </button>
              <h4 class="modal-title" >确认</h4>
            </div>
            <div class="modal-body">确认删除该地址吗？</div>
            <div class="modal-footer">
              <button
                class="btn btn-primary"
                @click="performRemoveAddr"
                type="button"
              >
                确定
              </button>
              <button
                ref="confirmCloseModal"
                class="btn btn-default"
                type="button"
                data-dismiss="modal"
              >
                关闭窗口
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <a
      ref="addressFormModal"
      href="#addressFormModal"
      data-toggle="modal"
      style="display: none"
    >-</a>
    <div
      class="modal fade"
      id="addressFormModal"
      role="dialog"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <form class="form-inline" role="form" id="addrForm" method="post">
            <div class="modal-header">
              <button
                class="close"
                aria-hidden="true"
                type="button"
                data-dismiss="modal"
              >
                ×
              </button>
              <h4 class="modal-title" >添加/修改收货地址</h4>
            </div>
            <div class="modal-body">
              <input
                type="hidden"
                id="addrId"
                name="addrId"
                v-model="addr.addrId"
              />
              <div class="form-group">
                <label for="addrProvince"> 省 </label>
                <input
                  class="form-control"
                  name="addrProvince"
                  v-model="addr.addrProvince"
                  id="addrProvince"
                  type="text"
                  placeholder="省"
                  required
                />
              </div>
              <div class="form-group">
                <label for="addrCity"> 市</label>
                <input
                  class="form-control"
                  name="addrCity"
                  v-model="addr.addrCity"
                  id="addrCity"
                  type="text"
                  placeholder="市"
                  required
                />
              </div>
              <div class="form-group">
                <label for="addrArea"> 区 </label>
                <input
                  class="form-control"
                  name="addrArea"
                  v-model="addr.addrArea"
                  id="addrArea"
                  type="text"
                  placeholder="区"
                  required
                />
              </div>
              <div class="form-group">
                <label for="addrContent"> 街道</label>
                <input
                  class="form-control"
                  name="addrContent"
                  v-model="addr.addrContent"
                  id="addrContent"
                  type="text"
                  placeholder="街道"
                  required
                />
              </div>
              <div class="form-group">
                <label for="addrReceiver"> 收件人 </label>
                <input
                  class="form-control"
                  name="addrReceiver"
                  v-model="addr.addrReceiver"
                  id="addrReceiver"
                  type="text"
                  placeholder="收件人"
                  required
                />
              </div>
              <div class="form-group">
                <label for="addrTel"> 联系电话</label>
                <input
                  class="form-control"
                  name="addrTel"
                  v-model="addr.addrTel"
                  id="addrTel"
                  type="text"
                  placeholder="联系电话"
                  required
                />
              </div>
            </div>
            <div class="modal-footer">
              <button
                class="btn btn-primary"
                @click="createOrUpdateAddress"
                type="button"
              >
                确定
              </button>
              <button
                ref="addrCloseModal"
                class="btn btn-default"
                type="button"
                data-dismiss="modal"
              >
                关闭窗口
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
</div>

<table class="table table-condensed table-hover">
			<thead>
					<tr>
						<th>#</th><th>省-市-区</th><th>街道</th><th>收件人</th><th>电话</th><th>默认地址</th><th>操作</th>
					</tr>
			</thead>
			<tbody>
				<tr v-for="address in addresses" :key="address.addrId">
					<td>1</td>
					<td>{{address.addrProvince + address.addrCity + address.addrArea}}</td>
					<td>{{ address.addrContent }}</td>
					<td>{{ address.addrReceiver }}</td>
					<td>{{ address.addrTel }}</td>
					<td class="isDefault">默认地址</td>
					<td>
					<a href="#" @click="handleAddressForm(address)">修改</a> |
					<a href="#" @click="removeAddress(address)">删除</a>|
					<a v-if="address.addrIsdefault == 0" href="#" @click="setDefault(address)">
                    设为默认地址</a>	
					</td>
				</tr>
			</tbody>
			</table>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			addr: {}, //记录当前操作的地址信息
		}
	},
	computed:{
		...mapGetters({addresses:'user/addresses'})
	},
	methods: {
	handleAddressForm(address) {
      this.addr = address;
      this.$refs.addressFormModal.click();
    },
    addNewAddress() {
      this.addr = { addrId: 0, addrIsdefault: 0 };
      this.$refs.addressFormModal.click();
    },
    createOrUpdateAddress() {
      this.$store.dispatch("user/createOrUpdateAddress", {
        address: this.addr,
        success: () => {
          this.$refs.addrCloseModal.click();
        },
        fail: () => {
          this.$refs.addrCloseModal.click();
        },
      });
    },
    removeAddress(addr) {
      this.addr = addr;
      this.$refs.confirmModal.click();
    },
    performRemoveAddr() {
      this.$store.dispatch("user/removeAddress", {
        address: this.addr,
        success: () => {
          this.addr = {};
          this.$refs.confirmCloseModal.click();
        },
        fail: () => {
          this.$refs.confirmCloseModal.click();
        },
      });
    },
    setDefault(address) {
      this.$store.dispatch("user/setDefaultAddress", {
        address,
        success: () => {
          this.$store.dispatch("user/fetchUserAddress");
        },
        fail: () => {},
      });
    },
	},
	created(){
		if( this.addresses.length==0){
           this.$store.dispatch('user/fetchUserAddress')
       }
	}
}
</script>